<template>
	<view class="cg-tabs">
		<u-tabs :list="list" @click="click" @change="onChange" :scrollable="scrollable" :activeStyle="{
			 color: themeColor,
		 }" :lineColor="themeColor" >
			<template class="" slot="right">
				<slot name="right"></slot>
			</template>
		</u-tabs>
	</view>
</template>

<script>
	/**
	 * tabs
	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
	 * @property {Boolean}			scrollable	是否允许滑动  （默认 true ）
	 * @property {Array}			list		列表
	 * @event {Function} click		点击
	 * @event {Function} change		改变
	 * @example <cg-tabs :list="list" @click="onClick" ></cg-tabs>
	 */
	export default {
		name: "cg-tabs",
		props: {
			list: {
				default: () => {
					return [{
						name: '全部',
						type: 0
					}, {
						name: '待付款',
						type: 1
					}, {
						name: '待收款',
						type: 2
					}, {
						name: '待上架',
						type: 3
					}, {
						name: '已出售',
						type: 5
					}]
				},
				type: Array
			},
			scrollable: {
				type: Boolean,
				default: true

			}
		},
		data() {
			return {

			};
		},
		methods: {
			click(item, index) {
				console.log('item', item, index);
				this.$emit('click', item)
			},
			onChange(index) {
				this.$emit('change', index)
			}
		}
	}
</script>

<style scoped>
	.cg-tabs {
		background-color: #ffffff;
	}
</style>